<template>
  <div class="top" style="display: flex; align-items: center">
    <p class="left" style="
        width: 8px;
        height: 25px;
        background-color: #f6d39c;
        margin-right: 10px;
        border-radius: 3px;
      "></p>
    <p style="color: white; font-size: 22px; font-weight: 600">{{ $t('订单查询') }} </p>
  </div>

  <div class="box1" style="display: flex; margin-top: 30px">
    <div class="leftbottom" style="
        display: flex;
        justify-content: flex-end;
        margin-bottom: 20px;
        align-items: center;
      ">

      <div style="
          height: 28px;
          border-radius: 3px;
          background-color: #f6d39c;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 10px;
          font-size: 13px;
          display: inline-block;
           padding-left: 5px;
            padding-right: 5px;
            padding-top: 5px;
            box-sizing: border-box;
        " @click="exportToExcel">
        <el-icon style="font-size: 16px; margin-right: 5px">
          <Bottom />
        </el-icon>
        <span>{{ $t('导出') }} </span>
      </div>
    </div>
  </div>
  <div class="box2">
    <div class="inner inner1">
      <span>{{ $t('订单状态') }}</span>
      <el-select v-model="value" class="m-2" :placeholder="$t('已平仓')" style="width: 120px;height:32px"
        @change="handleSelectChange">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <div class="inner inner2">
      <span>{{ $t('交易品种') }} </span>
      <el-input v-model="form.pro_name" :placeholder="$t('交易品种')" />
    </div>
    <div class="inner inner2">
      <span>{{ $t('订单号') }}</span>
      <el-input v-model="form.order_sn" :placeholder="$t('订单号')" />
    </div>
    <div class="inner inner1">
      <span>{{ $t('日期类型') }}</span>
      <el-select v-model="value1" class="m-2" :placeholder="$t('下单时间')" style="width: 120px;height:32px"
        @change="handleSelectChange">
        <el-option v-for="item in date" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <div class="inner inner3">
      <span>{{ $t('开始日期') }}</span>
      <div class="block">
        <el-date-picker v-model="form.starttime" type="date" value-format="YYYY-MM-DD" />
      </div>
    </div>
    <div class="inner inner4">
      <span>{{ $t('结束日期') }}</span>
      <div class="block">
        <el-date-picker v-model="form.endtime" type="date" value-format="YYYY-MM-DD" />
      </div>
    </div>
    <div class="inner inner5">
      <div style="
          height: 33px;
          border-radius: 5px;
          background-color: #f6d39c;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          margin-right: 10px;
          display: inline-block;
           padding-left: 5px;
            padding-right: 5px;
            padding-top: 5px;
            box-sizing: border-box;
        " @click="select">
        <el-icon style="font-size: 16px; margin-right: 5px">
          <Search />
        </el-icon>
        <span>{{ $t('查询') }}</span>
      </div>
    </div>
  </div>

  <div class="box3">
    <el-table :data="pageData" style="width: 100%" height="100%">
      <el-table-column fixed="left" prop="order_sn" :label="$t('订单号')" width="250" sortable />
      <el-table-column prop="id" label="ID" width="80" v-if="0 == 1" />
      <el-table-column prop="type_str" :label="$t('类型')" width="100" sortable />
      <el-table-column prop="limit_type_str" :label="$t('市价/挂单')" width="120" sortable />
      <el-table-column prop="pro_name" :label="$t('交易品种')" width="150" sortable />
      <el-table-column prop="price" :label="$t('开仓价')" width="150" sortable />
      <el-table-column prop="warehouse_price" :label="$t('库存费')" width="100" sortable />
      <el-table-column prop="num" :label="$t('手数')" width="100" sortable />
      <el-table-column prop="createtime" :label="$t('开仓时间')" width="150" sortable />
      <el-table-column prop="saleprice" :label="$t('平仓价')" width="100" sortable />
      <el-table-column prop="money" :label="$t('平仓盈亏')" width="120" sortable />
      <el-table-column prop="s_l" label="S/L" width="120" />
      <el-table-column prop="t_p" label="T/P" width="120" />
      <el-table-column fixed="right" :label="$t('操作栏')" label="" width="120">
        <template #default="{ row }">
          <div style="
          width: 80px;
          height: 28px;
          border-radius: 5px;
          background-color: #f6d39c;
          margin-right: 10px;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
         /*  display: inline-block;
           padding-left: 5px;
            padding-right: 5px;
            box-sizing: border-box; */
        " @click="openDetail(row.id)" class="bt">
            <el-icon style="font-size: 14px; margin-right: 5px ;color:black">
              <View />
            </el-icon>
            <span style="font-size: 13px; color:black">{{ $t('详情') }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="total" style="width: 100%;height: 40px;color: white; display: flex;align-items: center;">
      <span style="margin-left: 10px;">{{ $t('统计') }}</span>
      <span style="margin-left: 570px;">{{ $t('总盈亏') }}：{{ all_money }}</span>
    </div>
    <div class="block" style="margin-top: 20px; display: flex;">
      <el-select v-model="form.pagesize" class="m-2" :placeholder="$t('10条/页')" style="width: 120px;height:32px;margin-right: 20px;"
        @change="handleSizeChange">
        <el-option v-for="item in page" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-pagination v-model:current-page="form.page"
        background layout=" prev, pager, next" :total="pageTotal"
        @current-change="handlePageChange" />
    </div>
  </div>

  <!-- 详情弹出框 -->
  <el-dialog v-model="dialog" title="Tips" width="800px" draggable style="background-color: #272b37;">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <p style="color:white;">{{ $t('订单详情') }}</p>
      </div>
    </template>
    <el-form :inline="true" :model="detail" class="demo-form-inline" :label-position="right" label-width="150px">
      <el-form-item :label="$t('订单号')">
        <el-input v-model="detail.order_sn" disabled />
      </el-form-item>
      <el-form-item :label="$t('产品名称')">
        <el-input v-model="detail.pro_name" disabled />
      </el-form-item>
      <el-form-item :label="$t('买入价')">
        <el-input v-model="detail.price" disabled />
      </el-form-item>
      <el-form-item :label="$t('平仓价')">
        <el-input v-model="detail.saleprice" disabled />
      </el-form-item>
      <el-form-item :label="$t('买入/卖出')">
        <el-input v-model="detail.type_str" disabled />
      </el-form-item>
      <el-form-item :label="$t('市价/挂单')">
        <el-input v-model="detail.limit_type_str" disabled />
      </el-form-item>
      <el-form-item :label="$t('手数')">
        <el-input v-model="detail.num" disabled />
      </el-form-item>
      <el-form-item :label="$t('下单时间')">
        <el-input v-model="detail.createtime" disabled />
      </el-form-item>
      <el-form-item :label="$t('平仓时间')">
        <el-input v-model="detail.sale_time" disabled />
      </el-form-item>
      <el-form-item :label="$t('手续费')">
        <el-input v-model="detail.commission" disabled />
      </el-form-item>
      <el-form-item :label="$t('盈亏')">
        <el-input v-model="detail.money" disabled />
      </el-form-item>
      <el-form-item :label="$t('止盈')">
        <el-input v-model="detail.s_l" disabled />
      </el-form-item>
      <el-form-item :label="$t('止损')">
        <el-input v-model="detail.t_p" disabled />
      </el-form-item>
      <el-form-item :label="$t('收益')">
        <el-input v-model="detail.sj_money" disabled />
      </el-form-item>
      <el-form-item :label="$t('保证金')">
        <el-input v-model="detail.credit" disabled />
      </el-form-item>

    </el-form>
  </el-dialog>
</template>

<script>
import {
  HomeFilled,
  Promotion,
  Pointer,
  Edit,
  Search,
  Bottom,
  Plus,
} from "@element-plus/icons-vue";
import * as XLSX from 'xlsx';
import { orderListApi, orderDetailApi } from '@/api/index'
export default {
  data() {
    return {
      pageTotal: '',
      all_money: '',
      detail: {},
      dialog: false,
      value: '',
      value1: '',
      form: {
        page: '1',
        status: '2',
        starttime: '',
        endtime: '',
        order_sn: '',
        pro_name: "",
        time_type: '1',
        pagesize: 10
      },
      tableData: [],
      pageData: [],
      date: [
        {
          value: this.$t('下单时间'),
          label: this.$t('下单时间'),
          time_type: '1'
        },
        {
          value: this.$t('平仓时间'),
          label: this.$t('平仓时间'),
          time_type: '2'
        }
      ],
      options: [
        {
          value: this.$t('已平仓'),
          label: this.$t('已平仓'),
          status: '2',
        },
        {
          value: this.$t('开仓'),
          status: '1',
          label: this.$t('开仓'),
        },
        {
          value: this.$t('待处理'),
          status: '0',
          label: this.$t('待处理'),
        }
      ],
      page:[
        {
          value: 5,
          label: this.$t('5条/页'),
        },
        {
          value: 10,
          label: this.$t('10条/页'),
        },
        {
          value: 15,
          label: this.$t('15条/页'),
        },
        {
          value: 20,
          label: this.$t('20条/页'),
        },
      ],
    };
  },
  methods: {
    handlePageChange() {
      this.getOrderList()
    },
    exportToExcel() {
      // 获取数据
      const data = this.tableData.map(item => Object.values(item));
      const header = Object.keys(this.tableData[0]); // 获取表头
      data.unshift(header); // 将表头添加到数据数组的开头

      const ws = XLSX.utils.aoa_to_sheet(data);
      const colWidth = { wch: 20 }; // 设置宽度为
      // 创建一个工作表
      const wb = XLSX.utils.book_new();
      ws['!cols'] = Array(data[0].length).fill(colWidth);
      // 将列宽应用到工作表中
      XLSX.utils.book_append_sheet(wb, ws, '订单查询');
      // 将工作簿保存为Excel文件
      XLSX.writeFile(wb, 'exported_data.xlsx');
    },
    // 查询
    select() {
      this.getOrderList()
    },
    // 获取订单列表
    getOrderList() {
      const token = localStorage.getItem('token');
      this.form.token = token;
      orderListApi(this.form).then(res => {
        this.pageTotal = res.data.total;
        this.tableData = res.data.data
        this.all_money = res.data.all_money
        this.pageData = res.data.data
      });
    },
    // 获取订单详情
    openDetail(id) {
      const token = localStorage.getItem('token')
      orderDetailApi({ token, id }).then(res => {
        this.dialog = true
        console.log(res.data);
        this.detail = res.data
      })
    },
    handleSelectChange(selectedValue) {
      console.log('选择的 value 值:', selectedValue);
      // 通过 selectedValue 获取对应的 status 值
      const selectedOption = this.options.find(item => item.value === selectedValue);
      const selectedDate = this.date.find(item => item.value === selectedValue);
      if (selectedOption) {
        this.form.status = selectedOption.status;
        console.log(this.form.status)
      }
      if (selectedDate) {
        this.form.time_type = selectedDate.time_type;
        console.log(this.form.time_type)
        console.log(this.form.endtime);
      }
    },
    handleSizeChange(pageSize) {
      this.form.pageSize = pageSize;
      this.getOrderList(); // 更新数据，重新请求后端数据
    },
  },
  components: {},
  mounted() {
    this.getOrderList()
  }
};
</script>

<style lang="scss" scoped>
:deep(.el-progress-bar__outer) {
  background-color: rgba(255, 255, 255, 0.4);
  /* lightgray, but transparent */
}

/* 进度条颜色 我需要的是渐变色 */
:deep(.el-progress-bar__inner) {
  background-color: white;
  //background: linear-gradient(90deg, #FEC015 0%, #FE8B25 100%);
}

.box1:hover {
  cursor: pointer;
}

.custom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}

.topbox {
  width: 100%;
  height: 21px;
  display: flex;
  font-size: 13px;

  // justify-content: space-around;
  .small {
    width: 152px;
    // background-color: pink;
  }

  .small2 {
    width: 152px;
    // background-color: pink;
  }
}

.chart-wrapper {
  width: 100%;
  /* 确保内部图表容器充满el-col */
}

.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.box2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: white;

  :deep(.el-input__wrapper) {
    background-color: black;
    height: 32px;
    box-shadow: none;
    color: white;

  }

  .inner {
    margin-right: 10px;
    margin-bottom: 5px;
    display: flex;
    justify-content: center;
    align-items: center;

    span {
      margin-right: 10px;
    }
  }

  .inner1 {
    :deep(.el-input__wrapper) {
      box-shadow: none;
      color: white;
      background-color: black;
    }
  }

  .inner2 {
    .el-input {
      width: 220px;
    }
  }

  .inner3 {
    align-items: center;
    display: flex;
  }

  .inner4 {
    align-items: center;
    display: flex;


    .demo-date-picker {
      display: flex;
      width: 100%;
      padding: 0;
      flex-wrap: wrap;
    }

    .demo-date-picker .block {
      padding: 30px 0;
      text-align: center;
      border-right: solid 1px var(--el-border-color);
      flex: 1;
    }

    .demo-date-picker .block:last-child {
      border-right: none;
    }

    .demo-date-picker .demonstration {
      display: block;
      color: var(--el-text-color-secondary);
      font-size: 14px;
      margin-bottom: 20px;
    }
  }

  .inner5 {
    color: #303133;
  }
}

.box3 {
  :deep(.el-select .el-input .is-focus .el-input__wrapper) {
    box-shadow: none;
  }

  :deep(.el-table.is-scrolling-left th.el-table-fixed-column--left) {
    background-color: #2d303d;
  }

  :deep(.el-table th.el-table__cell) {
    background-color: #2d303d;
  }

  :deep(.el-table td) {
    border-bottom: 3px solid black;
  }

  :deep(.el-table__body-wrapper tr td) {
    background-color: #2d303d;
    color: white;
  }

  :deep(.el-table thead) {
    color: #fff;
  }

  :deep(.el-pagination__total) {
    color: #fff !important;
  }

  :deep(.el-pagination__jump) {
    color: #fff !important;
  }

  :deep(.el-pager li) {
    color: #fff !important;
  }

  :deep(.el-input__inner) {
    color: #fff !important;
  }
}

:deep(.el-form-item__label) {
  width: 100px;
  color: #fff;
}

:deep(.el-input__inner) {
  color: #fff;
}

:deep(.el-pagination button) {
  background-color: black;
  color: white;
}

:deep(.el-pager li) {
  background-color: black;
  // color:white;

}

:deep(.el-input__wrapper) {
  background-color: black;
  box-shadow: none;
}

:deep(.el-table) {
  background-color: #2d303d;
}

// 分页器
:deep(.el-pagination) {
  .el-pager li {
    background-color: #000;
  }
}

:deep(.el-pagination.is-background .btn-next) {
  background-color: #000;
}

:deep(.el-pagination.is-background .btn-prev) {
  background-color: #000;
}

:deep(.el-pagination.is-background .el-pager li.is-active) {
  background-color: #999;
}
</style>
